<template>
  <!-- 中国地图 -->
  <div class="map-ball"></div>
  <div id="mapChart" class="echarts">
    <ECharts :option="option" :resize="false" />
  </div>
</template>

<script setup lang="ts">
import echarts, { ECOption } from "@/components/ECharts/config";
import ECharts from "@/components/ECharts/index.vue";
import mapJson from "../assets/china.json";

echarts.registerMap("china", mapJson as Parameters<typeof echarts.registerMap>[1]);

const envelopePath =
  "M20,20H4a2.002,2.002,0,0,1-2-2V8A2.002,2.002,0,0,1,4,6H20a2.002,2.002,0,0,1,2,2v10A2.002,2.002,0,0,1,20,20ZM4,8V18H20V8Zm0,2H18V16H4Zm2,3h2v2H6Zm4,0h2v2H10Zm4,0h2v2h-2Z";

const data = [
  {
    fromName: "北京",
    toName: "重庆",
    coords: [
      [116.4074, 39.9042], // 北京的经纬度
      [106.5527, 29.563] // 重庆的经纬度
    ]
  },
  {
    fromName: "上海",
    toName: "重庆",
    coords: [
      [121.4737, 31.2304], // 上海的经纬度
      [106.5527, 29.563] // 重庆的经纬度
    ]
  },
  {
    fromName: "重庆",
    toName: "广州",
    coords: [
      [106.5527, 29.563], // 重庆的经纬度
      [113.2644, 23.1291] // 广州的经纬度
    ]
  },
  {
    fromName: "重庆",
    toName: "北京",
    coords: [
      [106.5527, 29.563], // 重庆的经纬度
      [116.4074, 39.9042] // 北京的经纬度
    ]
  },
  {
    fromName: "重庆",
    toName: "成都",
    coords: [
      [106.5527, 29.563], // 重庆的经纬度
      [104.0668, 30.5728] // 成都的经纬度
    ]
  },
  {
    fromName: "成都",
    toName: "重庆",
    coords: [
      [104.0668, 30.5728], // 成都的经纬度
      [106.5527, 29.563] // 重庆的经纬度
    ]
  },
  {
    fromName: "成都",
    toName: "重庆",
    coords: [
      [104.0668, 30.5728], // 成都的经纬度
      [106.5527, 29.563] // 重庆的经纬度
    ]
  },
  {
    fromName: "重庆",
    toName: "成都",
    coords: [
      [106.5527, 29.563], // 重庆的经纬度
      [104.0668, 30.5728] // 成都的经纬度
    ]
  }
];

const option: ECOption = {
  tooltip: {
    trigger: "item"
  },
  grid: {
    left: "0px",
    right: "80px",
    top: "10px",
    bottom: "10px"
  },
  geo: {
    map: "china",
    zoom: 3.5,
    center: [107.5527, 29.963],
    scaleLimit: {
      min: 0.8
    },
    label: {
      color: "#fff",
      show: true
    },
    emphasis: {
      label: {
        color: "#fff",
        show: true
      },
      itemStyle: {
        areaColor: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "#073684" },
            { offset: 1, color: "#2B91B7" }
          ]
        }
      }
    },
    roam: false,
    itemStyle: {
      areaColor: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: "#073684" },
          { offset: 1, color: "#061E3D" }
        ]
      },
      borderColor: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: "#00F6FF" },
          { offset: 1, color: "#87ADCB" }
        ],
        false
      ),
      shadowColor: "rgba(10,76,139,1)",
      shadowOffsetY: 0,
      shadowBlur: 60,
      borderWidth: 1
    },
    tooltip: {
      show: false
    }
  },
  series: [
    {
      name: "",
      type: "lines",
      coordinateSystem: "geo",
      zlevel: 1,
      effect: {
        show: true,
        period: 6,
        trailLength: 0.7,
        color: "red",
        symbolSize: 3
      },
      lineStyle: {
        color: "#fff",
        width: 0,
        curveness: 0.2
      },
      data
    },
    {
      name: "",
      type: "lines",
      coordinateSystem: "geo",
      zlevel: 2,
      symbol: ["none", "path://" + envelopePath],
      symbolSize: 10,
      effect: {
        show: true,
        period: 6,
        trailLength: 0,
        symbol: "path://" + envelopePath,
        symbolSize: 15
      },
      lineStyle: {
        color: "#fff",
        width: 1,
        opacity: 0.6,
        curveness: 0.2
      },
      data
    }
  ]
};
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
.map-ball {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  img {
    width: 500px;
    height: 500px;
  }
}
</style>
